<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dom和jQuery的互换</title>
</head>

<body>
    <div id="div1">文本</div>
    <script src="./jQuery包/jquery-3.6.0.js"></script>
    <script>
        //用原来的dom来获取元素的话，写的很繁琐，而且当元素不存在时，返回的是一个null，但是用jQuery来获取时返回的是一个包装集，只是里面没有值
        //jQuery返回的东西是一个包装集
        var ddiv = document.getElementById('div1');
        console.log(ddiv); //会获取div1包括里面的属性
        var ddivs = document.getElementsByTagName('div');
        console.log(ddivs); //会返回一个集合，但是和jQuery返回的是不一样的
        var ddiv1 = document.getElementById('divs'); //当该元素不存在时，会返回null
        console.log(ddiv1);
        // 用jQuery来获取不存在的元素时会返回一个包装集
        console.log('===============');
        var di1 = $("#div1");
        console.log(di1); //返回的是一个集合
        var di2 = $("divs");
        console.log(di2); //当元素不存在时也会返回一个包装集
        console.log('====================两者之间互相转换=================');

        console.log('dom变为jQuery');
        var domdivtojquery = $(ddiv);
        console.log(domdivtojquery);
        console.log('jquery变为dom');
        //方法一：直接取下标
        var jQuerytodom = di1[0];
        console.log(jQuerytodom); //直接打印里面的值就可以得到dom
    </script>

</body>

</html>